/*
* @Author: Zhangqiaojuan
* @Description: 签名组件
*/
<template>
	<view class="sign-gape">
		<!-- 签名图片 -->
		<view class="sign-img" @click="imgTap">
			<view class="sign-icon">
				<u-icon name="edit-pen"></u-icon>
				<text class="icon-text">{{this.$t('system.sign')}}</text>
			</view>
			<u-image width="670rpx" height="200rpx" :src="imgSrc1" mode="scaleToFill"></u-image>
		</view>
		<!-- 签名画板 -->
		<view class="container" v-if="show">
			<view class="sigh-btns">
				<u-button :plain="true" class="btn cancel-btn" @tap="handleCancel">{{this.$t('system.cancel')}}</u-button>
				<u-button class="btn reset-btn" @tap="handleReset">{{this.$t('system.rewrite')}}</u-button>
				<u-button class="btn confirm-btn" @tap="handleConfirm">{{this.$t('system.affirm')}}</u-button>
			</view>
			<view class="sign-box">
				<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
					@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
				<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}" class="canvsborder"></canvas>
			</view>
		</view>
		<!-- <view class="my-totast">
			<u-toast ref="uToast" />
		</view> -->
	</view>
</template>

<script>
	import COS from '@/static/js/COS.js'
	import { base64toFile, base64ToPath } from 'image-tools'
	var x = 20;
	var y = 20;
	var tempPoint = []; //用来存放当前画纸上的轨迹点
	var id = 0;
	var type = '';
	let that;
	let canvasw;
	let canvash;

	export default {
		name: "signCard",
		props: {
			imgSrc: '',
		},
		data() {
			return {

				show: false,
				ctx: '', //绘图图像
				points: [], //路径点集合,
				width: 0,
				height: 0,
				imgSrc1: '',
			};
		},
		created(option) {
			that = this;
			console.log('onload:' + option);
			// id = option.id;
			// type = option.type;
			that.ctx = uni.createCanvasContext('mycanvas', that); //创建绘图对象
			//设置画笔样式
			that.ctx.lineWidth = 4;
			that.ctx.lineCap = 'round';
			that.ctx.lineJoin = 'round';
			that.width = that.$store.getters.homePageWindowInfo.screenWidth * 0.8;
			that.height = that.$store.getters.homePageWindowInfo.screenHeight * 0.95;

		},
		methods: {
			//imgTap
			imgTap: function() {
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
				this.show = true;
				that.$emit('src', '')
			},
			//触摸开始，获取到起点
			touchstart: function(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove: function(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
				tempPoint.push(movePoint);
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend: function() {
				this.points = [];
			},
			draw: function() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//取消签名
			handleCancel() {
				this.show = false;
			},

			//清空画布
			handleReset: function() {
				that.ctx.clearRect(0, 0, that.width, that.height);
				that.ctx.draw(true);
				tempPoint = [];
			},

			//将签名笔迹上传到服务器，并将返回来的地址存到本地
			handleConfirm: function() {
				let that = this;
				if (tempPoint.length == 0) {
					uni.showToast({
						title: this.$t('system.signName'),
						icon: 'none',
						duration: 2000
					});
					return;
				}
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: function(res) {
						let tempPath = res.tempFilePath;
						const ctx = uni.createCanvasContext('camCacnvs', that);
						ctx.translate(0, that.width);
						ctx.rotate((-90 * Math.PI) / 180);
						ctx.drawImage(tempPath, 0, 0, that.width, that.height);
						ctx.draw();
						setTimeout(() => {

							//保存签名图片到本地
							uni.canvasToTempFilePath({
								canvasId: 'camCacnvs',
								success: function(res) {
									console.log(1111111111,base64ToPath(res.tempFilePath))
									
										COS.uploadFileToTencentClound(Date.now(), res.tempFilePath, 'shop_img').then((r) => {
											console.log(r)
											that.signa = r.fileName
											//设置图片
											that.imgSrc1 = that.$u.file.getMedieUrl(r.split(`${process.uniEnv.COSBucket}.cos.${process.uniEnv.COSRegion}.myqcloud.com/`)[1]);
											that.$emit('src', that.imgSrc1)
											that.show = false;
										}).catch(f=>{
											console.log(3333)
										})



								},
								fail: err => {
									console.log('fail', err);
								}
							});
						}, 200);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-img {
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.sign-icon {
			position: absolute;
			top: 36rpx;
			left: 80rpx;
			z-index: 9;
			font-size: 28rpx;
			color: #1B1D29;

			.icon-text {
				padding-left: 10rpx;
			}
		}
	}

	.container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 1000;
		overflow: hidden;
		display: flex;
		flex-direction: row;

		.sign-box {
			width: 80%;
			height: 95%;
			// background-color: #eeeeee;
			margin: auto;
			display: flex;
			flex-direction: column;
			text-align: center;
			border-radius: 20rpx;
			margin-right: 10px;
		}

		.sign-view {
			height: 100%;
		}

		.sigh-btns {
			height: 100%;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.btn {
			margin: auto;
			padding: 8rpx 40rpx;
			transform: rotate(90deg);
			border: none;
			color: #FFFFFF;
			font-size: 20rpx;
			border-radius: 20rpx;
		}

		.cancel-btn {
			background: none;
			border: 1px #eeeeee solid;
			color: #000;
		}

		.reset-btn {
			background: #323755;
		}

		.confirm-btn {
			background: #2934D0;
		}

		.mycanvas {
			margin: auto 0rpx;
			background-color: #ececec;
			border-radius: 10px;
		}

		.canvsborder {
			border: 1rpx solid #333;
			position: fixed;
			top: 0;
			left: 10000rpx;
		}
	}

	.my-totast {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	/deep/ .uni-sample-toast {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
</style>